Manchester | 26-ITP-Jan | Ahmed Elmahmoudi | Sprint 2 | Form-Controls by Alaterry8 · Pull Request #1177 · CodeYourFuture/Module-Onboarding

Alaterry8 · 2026-02-14T15:46:44Z

Self checklist

I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
My changes meet the requirements of the task
I have tested my changes
My changes follow the style guide

Within a form, I added a name field with minimum 2 characters length requirement. I added an email field. I added a set of 3 colours to select from. I added 6 radio options for Size options.

netlify · 2026-02-14T15:46:49Z

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	`64112a7`
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/699379e4c8381a0008b31cb7
😎 Deploy Preview	https://deploy-preview-1177--cyf-onboarding-module.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	2 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 86 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

SlideGauge · 2026-02-15T17:46:45Z

Form-Controls/index.html

+
+        </P>
+
+


How do we submit the result of the form to the server? Do we need a special control for it?

I have addressed this issue by adding a button at the end. Thank you for pointing that out :D

SlideGauge · 2026-02-15T17:48:01Z

Form-Controls/index.html

+
+        <br> <br>
+        <label for="colour"> T-shirt colour:</label>
+        <select id="colour" name="T-shirt colour"> 


Note, we must require the user to actively select colour. Therefore initial option should be empty and we must demand the choise.

I fixed this by adding an empty option value, and made it required to choose a colour. Thanks!

SlideGauge · 2026-02-15T17:50:08Z

Form-Controls/index.html

+
+        <br> <br>
+        <label for="XS"> XS</label>
+        <input type="radio" id="XS" name="Size">


How do we make sure that user selected t-shirt size? Currently I may avoid selecting any.

Fixed this by making one option required. Cheers!

SlideGauge · 2026-02-15T17:51:11Z

Form-Controls/index.html

+
+        <br> <br>
+        <label for="S"> S</label>
+        <input type="radio" id="S" name="Size">


Have a look into each radio button. Which value will server receive when the appropriate radio button is selected? How will it distinguish one radio button from another?

I have added the values for each size.

SlideGauge · 2026-02-15T17:54:07Z

Form-Controls/index.html

+        </select>
+
+       <br>
+        <P> Size:


p tag is used typically for paragraph of text. Is there a tag which allows to group controls together? Is there a way to have a legend annotating the control appropriately?

Yes, I made sure to use fieldset and legend so that the option are grouped neatly. Thanks!

SlideGauge · 2026-02-15T17:54:31Z

Form-Controls/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>


what was the reason to change from DOCTYPE to doctype?

I believe that was done automatically when I added the Prettier formatting extension.

SlideGauge · 2026-02-15T17:56:02Z

Form-Controls/index.html

-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+        <label for="name"> Name: </label>
+        <input type="text" id="name" name="Name" minlength="2" required>


The convention for naming elements (i.e' name) is lowercase

so the only thing that can be capitalised is what goes between the label tags?

SlideGauge · 2026-02-15T17:56:28Z

Form-Controls/index.html

+
+        <br> <br>
+        <label for="colour"> T-shirt colour:</label>
+        <select id="colour" name="T-shirt colour"> 


the convention for name is to avoid usage spaces. Use underscore or dash instead

Noted! fixed it. Thanks for all the feedback ;D

Alaterry8 added 8 commits February 14, 2026 15:21

Add name field and submit button to test validation

11a6944

Add email field

667fd99

Add T-shirt colour field

8caf0c5

Add Size options via radio buttons

1dd5b4c

Remove submit button

0f0e9d3

Attach labels to unputs

1774cf2

Add spacing between controls

cda92fc

Check requirements

20bf3d9

Alaterry8 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 14, 2026

SlideGauge reviewed Feb 15, 2026

View reviewed changes

SlideGauge added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Feb 15, 2026

Alaterry8 added 4 commits February 16, 2026 19:50

Add empty value to colour set and make it required to choose

d37ee80

Add fieldset for size options and make it required to choose

59dd754

fix capitalisation and spacing issues

99585ec

Capitalise Doctype

64112a7

Alaterry8 added Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. and removed Reviewed Volunteer to add when completing a review with trainee action still to take. labels Feb 16, 2026

Uh oh!

Conversation

Alaterry8 commented Feb 14, 2026

Uh oh!

netlify bot commented Feb 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for cyf-onboarding-module ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify bot commented Feb 14, 2026 •

edited

Loading